import React, { useState, useEffect, useRef } from "react";
import { Form, Button, Input, Affix, Select, message, Space, Switch, Drawer, Row, Col } from "antd";
import { useModelAssociateMapping, useModelAssociateType} from "@/components";
import cmdbres from "@/data/cmdbres";
import hcpiam from "@/data/hcpiam";
import request, {requestIAM} from "@/utils/request";
import regexpUtil from "@/utils/regexpUtil";
import hcpUtils from "@/utils/hcpUtils";

const { uniqueIdentificationRegexp } = regexpUtil;
const user = hcpUtils.getUser();
const EditRelation = ({ history, visible, setVisible, onCreateFinish, info }) => {
    const [loading, setLoading] = useState(false);
    const [mapping] = useModelAssociateMapping();
    const [{associateTypeData}] = useModelAssociateType();
    const [selectTypeValues, setSelectTypeValues] = useState({});
	const [form] = Form.useForm();

    useEffect(() => {
		if(visible && info) {
            setSelectTypeValues({
                srcModuleId: info.srcModuleId,
                srcModuleCode: info.srcModuleCode,
                srcModuleName: info.srcModuleName,
                destModuleId: info.destModuleId,
                destModuleCode: info.destModuleCode,
                destModuleName: info.destModuleName,
                associateType: info.associateType,
                mapping: info.mapping,
            });
            
            form.setFieldsValue({
                ...info
            });
		}
	}, [visible, info]);

	const onFinish = async (fieldsValue) => {
        setLoading(true);
        let param = {
            id: info.id,
            moduleAssociateCode: fieldsValue.moduleAssociateCode,
            moduleAssociateName: fieldsValue.moduleAssociateName,
            description: fieldsValue.description,
            namespace: 'default',
            author: user.staffName,
            ...selectTypeValues
        }
		let res = await request({
			...cmdbres.updateModelAssociate,
			data: param
		});
		setLoading(false);
		if (res && res.code == 200) {
			setVisible(false);
			message.success("修改关联成功！");
			if (typeof onCreateFinish == "function") onCreateFinish(res);
		}
	};

	const changeType = (type, value, option) => {
        let selectType = {...selectTypeValues};
        if(option) {
            Object.assign(selectType, option);
        } else {
            selectType[type] = value;
        }
        setSelectTypeValues(selectType);
	}

    const handleClose = () => {
        setVisible(false);
    }

    return (
        <Drawer 
            className="drawer-table-columns create-field"
            title={'编辑关联'}
            placement={'right'}
            width={600}
            onClose={handleClose}
            visible={visible}
            footer={null}
        >
            <Form
                className="hcp-drawer-form"
                form={form}
                labelCol={{ span: 5}}
                wrapperCol={{ span: 17 }}
                name="basic"
                onFinish={onFinish}
            >
                 <Form.Item 
                    label="唯一标识"
                    name="moduleAssociateCode"
                    rules={[
                        {
                            required: true,
                            message: '唯一标识不能为空',
                        },
                        uniqueIdentificationRegexp(256),
                    ]}
                    extra={
                        <p style={{ color: "#999999" }}>
                            请填写以字母开头，数字、字母、下划线，横线的组合
                        </p>
                    }
                    style={{ marginBottom: 5 }}
                    >
                    <Input placeholder="请输入唯一标识" maxLength={256} disabled={info}/>
                </Form.Item>
                <Form.Item 
                    label="名称" 
                    name="moduleAssociateName" 
                    rules={[{required: true,message: '请输入字段名称'}]}
                >
                    <Input placeholder="请输入字段名称" maxLength={64} />
                </Form.Item>
                <Form.Item
                    label="源模型"
                    name="srcModuleName"
                    key="srcModuleName"
                    rules={[{required: true,message: '请选择源模型'}]}
                >
                    <Input style={{ width: "100%", marginRight: 10 }} disabled/>
                </Form.Item>
                <Form.Item
                    label="目标模型"
                    name="destModuleName"
                    key="destModuleName"
                    rules={[{required: true,message: '请选择目标模型'}]}
                >
                    <Input style={{ width: "100%", marginRight: 10 }} disabled/>
                </Form.Item>
                <Form.Item
                    label="关联类型"
                    name="associateType"
                    key="associateType"
                    rules={[{required: true,message: '请选择关系类型'}]}
                >
                     <Select
                        placeholder="请选择"
                        style={{ width: "100%", marginRight: 10 }}
                        onChange={(value) => changeType('associateType', value)}
                    >
                        {
                             associateTypeData?.map((item, index) => (
                                <Select.Option
                                    key={item.associateTypeCode}
                                    value={item.associateTypeCode}
                                    disabled={item.associateTypeCode == "cm_mainline"}
                                >
                                    {item.name}
                                </Select.Option>
                            ))
                        }
                    </Select>
                </Form.Item>
                <Form.Item
                    label="源-目标约束"
                    name="mapping"
                    key="mapping"
                    rules={[{required: true,message: '请选择源-目标约束'}]}
                >
                    <Select
                        placeholder="请选择"
                        style={{ width: "100%", marginRight: 10 }}
                        onChange={(value) => {
                            changeType('mapping', value);
                        }}
                    >
                        {
                            mapping?.map((item, index) => (
                                <Select.Option
                                    key={index}
                                    value={item}
                                >
                                    {item}
                                </Select.Option>
                            ))
                        }
                    </Select>
                </Form.Item>
                <Form.Item
                    label="描述"
                    name="description"
                    key="description"
                >
                    <Input.TextArea />
                </Form.Item>
                <div className="modal-body-footer">
                    <Space>
                        <Button type="primary" htmlType="submit" loading={loading}>提交</Button>
                        <Button onClick={handleClose}>取消</Button>
                    </Space>
                </div>
            </Form>
        </Drawer>
    );
};

export default EditRelation;